<template>
    <div>
        <button @click="openModal">openModal</button>
        <h1>我是父组件</h1>
        <h4>modal1</h4>
        <component v-bind:is="modal1"></component>
        <h4>modal2</h4>
        <component v-bind:is="modal2"></component>
        <h4>modal3</h4>
        <component v-bind:is="modal3"></component>
        <component v-bind:is="CardDemo01"></component>
        <anchored-heading :level="1">Hello Word</anchored-heading>
    </div>
</template>
<script>
    import CardDemo01 from '../card/card-demo01';
    const CommentsMap = {
        CardDemo01
    }
    export default {
        name: "modal-demo01",
        comments:[
            CardDemo01
        ],
        render(h, ctx) {
            let data = ctx.props.data;
            console.log(data);
            let elementTypeList = data.elementTypeList;
            return h(
                "div",
                {
                    class: "dynamicClass"
                },
                data.result.map(item => {
                    return h(CommentsMap[elementTypeList[item.type]], {
                        props: {
                            data:item,
                        },
                    });
                })
            );
        },
        data(){
            return{
                CardDemo01,
                modal1:() => import('./modal.vue'),
                modal2 : resolve => require(['./modal.vue'], resolve),
                modal3 : r => require.ensure([], () => r(require('./modal.vue')), 'group-index')
            }
        },
        methods:{
            openModal(){
                const div = document.createElement('div');
                //div.innerHTML=1
                document.body.appendChild(div);
            }
        }
    }
</script>

<style scoped>

</style>
